<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">

    <title></title>
    <base href="${rc.contextPath}/">

    <#include "/commons/stylesheets.ftl">
    <!-- Data Tables -->
    <link href="bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="/css/plugins/datapicker/datepicker3.css" rel="stylesheet">
    <link href="/layer/skin/layer.css" rel="stylesheet">
    <style type="text/css">
        #toolbar button {
            margin-right: 10px;
        }
    </style>
    <script type="text/javascript">

        function search(){
            $("#table").bootstrapTable("refresh",{query:serializeForm("#form")});
        }

        function refreshVehicle(selectedVehicles,selectedVehicleIds){
            $("#selectedVehicles").val(selectedVehicles);
            $("#selectedVehicleIds").val(selectedVehicleIds);
        }

        function addCustomer(){
            var  rows = $("#table").bootstrapTable("getSelections");
            if(rows.length == 0){
                layer.msg("请选择一条记录");
                return false;
            }
            var customerInfos = $.map(rows,function(row){
                var customerInfo = row.id + "_" + row.customId + "_" + row.cellphoneNumber + "_" + row.vehicleLicense + "_" + row.vehicleBrand + "_" + row.vehicleSeries ;
                return customerInfo;
            });
            var customerIds = $.map(rows,function(row){
                return row.customId;
            });
            //alert(customerInfos);
            var gender = $("#gender").val();
            var age = $("#age").val();
            var mills = $("#mills").val();
            var vehicleAgeLimit = $("#vehicleAgeLimit").val();
            var startTime = $("#registerStart").val();
            var endTime = $("#registerEnd").val();
            var selectedVehicles = $("#selectedVehicles").val();
            var selectedVehicleIds = $("#selectedVehicleIds").val();

            var searchMap={
                 gender:gender,
                 age:age,
                 mills:mills,
                 vehicleAgeLimit:vehicleAgeLimit,
                 startTime:startTime,
                 endTime:endTime,
                 selectedVehicles:selectedVehicles,
                 selectedVehicleIds:selectedVehicleIds
            };
            window.parent.refreshCustomer(customerIds,customerInfos,searchMap);

            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
        }
    </script>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-content">
                        <form id="form" class="form-inline">
                            <input type="hidden" id="selectedVehicles" name="selectedVehicles"/>
                            <input type="hidden" id="selectedVehicleIds" name="selectedVehicleIds"/>
                            <input type="hidden" id="activityTargetType" name="activityTargetType" value="${activityTargetType!''}"/>
                            <input type="hidden" id="activityId" name="activityId" value="${activityId!''}"/>
                            <input type="hidden" id="selectCustomers" name="selectCustomers" value="${selectCustomers!''}"/>
                            <div class="row">
                                <div class="form-group" id="dataRange">
                                    <label class="control-label">注册时间</label>

                                    <div class="input-daterange input-group" stype="text-align:left;" id="datepicker">
                                        <input type="text" class="input-sm form-control" id="registerStart" name="registerStart" />
                                        <span class="input-group-addon">到</span>
                                        <input type="text" class="input-sm form-control" id="registerEnd" name="registerEnd" />
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label">性别：</label>
                                   <select name="gender" id="gender" class="form-control" >
                                       <option value=""></option>
                                       <option value="男">男</option>
                                       <option value="女">女</option>
                                   </select>
                                </div>

                            </div>
                            <div class="row">
                                <div class="form-group">
                                    <label class="control-label">年龄：</label>
                                    <select name="age" id="age" class="form-control" >
                                        <option value=""></option>
                                        <#list ageEnum as val>
                                             <option value="${val}">${val}</option>
                                        </#list>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label class="control-label">公里：</label>
                                    <select name="mills" id="mills" class="form-control" >
                                        <option value=""></option>
                                        <#list millsEnum as val>
                                             <option value="${val}">${val}</option>
                                        </#list>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label class="control-label">年限：</label>
                                    <select name="vehicleAgeLimit" id="vehicleAgeLimit"  class="form-control" >
                                        <option value=""></option>
                                        <#list vehicleYearsEnum as val>
                                             <option value="${val}">${val}</option>
                                        </#list>
                                    </select>
                                </div>

                            </div>
                            </form>
                        <div id="toolbar">
                            <label class="checkbox-inline">统计数量共<span id="totalCustomerNum" >0</span>个</label>
                            <label class="checkbox-inline"><a  href="javaScript:openDialog('customerVehicle/queryVehicleBrand?activityId=${activityId}' ,'选择车型',850,600);" >选择车型</a> </label>
                            <button class="btn btn-primary" type="button" style="margin-left: 20px;" onclick="search()">搜索</button>
                            <button href="projects.html" class="btn btn-primary "  onClick="addCustomer()">添加</>
                        </div>
                        <table id="table"
                               data-toolbar="#toolbar"
                               data-data-field="list"
                               data-search="false"
                               data-show-refresh="false"
                               data-show-columns="false"
                               data-show-export="false"
                               data-side-pagination="server"
                               data-pagination="true"
                               data-page-size="15"
                               data-url="${rc.contextPath}/customerVehicle/search?activityId=${activityId}&activityTargetType=${activityTargetType}"
                               >
                            <thead>
                                <tr>
                                    <th data-checkbox="true">id</th>
                                    <th data-field="middleName">用户昵称</th>
                                    <th data-field="cellphoneNumber">电话</th>
                                    <th data-field="gender">性别</th>
                                    <th data-field="ageRange">年龄</th>
                                    <th data-field="vehicleBrand">品牌</th>
                                    <th data-field="vehicleSeries">车型</th>
                                    <th data-field="vehicleLicense">车牌</th>
                                    <th data-field="vehicleMiles">公里</th>
                                    <th data-field="vehicleYears">年限</th>
                                </tr>
                            </thead>
                            <tbody>

                            </tbody>

                        </table>

                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 全局js -->
    <#include "/commons/scripts.ftl">

    <script src="layer/layer.js"></script>
    <script src="js/app.js"></script>

    <script type="text/javascript" src="bootstrap-table/bootstrap-table.min.js"></script>
    <script type="text/javascript" src="bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
    <!-- Data picker -->
    <script src="/js/plugins/datapicker/bootstrap-datepicker.js"></script>
    <!-- Page-Level Scripts -->
    <script>

        //选中已经选择的用户
        function initCheck(){
            var selectCustomers = $("#selectCustomers").val();
            console.log("selectCustomers====" + selectCustomers);
            var customerArr= new Array();
            customerArr = selectCustomers.split(',');
            var newArr= new Array();
            for(i in customerArr) {
                var cId = customerArr[i] + "";
                newArr.push(Number(cId));
            }
            console.log(newArr);
            //setTimeout(checkBy(newArr),1000);
            $("#table").bootstrapTable("checkBy", {field:"customId", values:newArr})
        }

        $(function(){
            $("#table").bootstrapTable({
                locale:'zh-CN',
                onLoadSuccess:function(data){
                    initCheck();
                }
            }) ;

            $("#dataRange .input-daterange").datepicker({
                keyboardNavigation:false,
                forceParse:false,autoclose:true
            });
        });
    </script>

    
    <!--统计代码，可删除-->

</body>

</html>